function MySwiper(sel, obj) {
  // obj.autopaly = false true  undefined

  this.box = document.querySelector(sel);

  // 记录 正在显示的选项或者页码 从0开始
  this.pageIndex = 0;
  // 2- 给小圆点点击移入事件
  this.pageLiArr = this.box.querySelectorAll(".page li");
  this.itemLiArr = this.box.querySelectorAll(".item li");
  this.rightBtn = this.box.querySelector(".rightBtn");
  this.leftBtn = this.box.querySelector(".leftBtn");
  this.timer = null;

  // 方法
  // 小圆点 -点击事件--功能
  this.pageFn = function () {
    this.pageLiArr.forEach((li, index) => {
      li.onmouseenter = () => {
        console.log(li, index);
        // 先让 当前的页码 对应的 小点 变红
        // 再让 移入小点 变白
        this.pageLiArr[this.pageIndex].style.background = "red";
        // this.pageLiArr.forEach(v => v.style.background = 'red')

        // 先让 当前的页码 对应的  上的li op 成为 0
        this.itemLiArr[this.pageIndex].style.opacity = 0;

        li.style.background = "white";

        // 再让 移入的小点 对应的 itemLi  op 成为1
        this.itemLiArr[index].style.opacity = 1;

        //改变 paegIndex值--记录最新选中状态
        this.pageIndex = index;
      };
    });
  };

  this.nextPageFn = () => {
    // 先让当前页面隐藏-先让当前的页面 变红
    this.itemLiArr[this.pageIndex].style.opacity = 0;
    this.pageLiArr[this.pageIndex].style.background = "red";

    // 计算下一页的页码
    let nextpageIndex = this.pageIndex + 1;

    console.log(this.itemLiArr);
    if (nextpageIndex == 5) {
      //说明已经是 最后一页了，下页应该是0
      nextpageIndex = 0;
    }
    // 再让下一页的出现 ，下一个小点 变白
    this.itemLiArr[nextpageIndex].style.opacity = 1;
    this.pageLiArr[nextpageIndex].style.background = "white";

    // 改变 pageInde的
    this.pageIndex = nextpageIndex;
  };
  // 左右翻页
  this.pageNextAndPrevFn = function () {
    this.rightBtn.onclick = this.nextPageFn;

    this.leftBtn.onclick = () => {
      // 先让当前页面隐藏-先让当前的页面 变红
      this.itemLiArr[this.pageIndex].style.opacity = 0;
      this.pageLiArr[this.pageIndex].style.background = "red";

      // 计算上一页的页码
      let prevpageIndex = this.pageIndex - 1;
      if (prevpageIndex == -1) {
        //说明已经是 第一页了，下页应该是4
        prevpageIndex = 4;
      }
      // 再让下一页的出现 ，下一个小点 变白
      this.itemLiArr[prevpageIndex].style.opacity = 1;
      this.pageLiArr[prevpageIndex].style.background = "white";

      // 改变 pageInde的
      this.pageIndex = prevpageIndex;
    };
  };

  // 自动播放
  this.autoPlayFn = function () {
    // this->对象的方法---new的那个对象

    // 自动播放---定时器  每隔2秒 自动点击 右按钮一次

    this.timer = setInterval(() => {
      // this.rightBtn.onclick()
      this.nextPageFn();

      // // 创建事件对象
      // let evt = new Event('click');
      // // 让事件对象 在right上触发
      // this.rightBtn.dispatchEvent(evt)
    }, 2000);

    // 移入 清除定时器
    this.box.onmouseenter = () => {
      //----mouseenter 事件内部 this 是 box(给谁添加的事件，this 就是谁)
      console.log("onmouseenter");
      // 清除是全局的变量 timer
      clearInterval(this.timer);
    };
    // 移出--重启定时器
    this.box.onmouseleave = () => {
      console.log("onmouseleave");
      // 重启定时 把 返回值直接存入全局变量，
      this.timer = setInterval(() => {
        // this.rightBtn.onclick()
        this.nextPageFn();

        // // 创建事件对象
        // let evt = new Event('click');
        // // 让事件对象 在right上触发
        // this.rightBtn.dispatchEvent(evt)
      }, 2000);
    };
  };

  // 调用写的方法
  this.pageFn();
  this.pageNextAndPrevFn();

  if (obj.autoplay == true) {
    this.autoPlayFn();
  }
}
